<template>
    <div class="wrap">
        <div class="List">
            <div class="card">
                <div class="load">
                    <div class="item" v-for="img in motifList?.content" :key="img.id">
                        <a :href="img.webUrl">
                            <img class="img" :src="img.cover" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import vipApi from "@/api/course";
import { ElMessage } from "element-plus";

//sort列表的数据
const motifList = ref<any>();
const getSortList = async () => {
    try {
        let result = await vipApi.reqmotif();
        motifList.value = result;
    } catch (error) {
        ElMessage.error("获取分类数据失败");
        return Promise.reject(error);
    }
};
//获取数据
onMounted(() => {
    getSortList();
});
</script>

<style scoped lang="less">
.wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 21px;

    .List {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        .card {
            margin-top: 20px;
            padding-bottom: 20px;
            .load {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                margin-left: auto;
                margin-right: auto;
                .item {
                    width: 287px;
                    height: 156px;
                    margin-bottom: 15px;
                    margin-right: 13px;
                    position: relative;
                    a {
                        position: absolute;
                        width: 287px;
                        height: 156px;
                        .img {
                            width: 287px;
                            flex-basis: 286px;
                            height: 156.5px;
                            -ms-flex-negative: 0;
                            flex-shrink: 0;
                            -webkit-box-flex: 0;
                            -ms-flex-positive: 0;
                            flex-grow: 0;
                            background: #cecece;
                            cursor: pointer;
                            background-size: cover;
                            background-position: 50%;
                            border-radius: 4px;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}
</style>
